<h3 class="mb-4">Analyst View</h3>
<div *ngIf="company">
    <div class="card shadow card-body">
        <h5>Analyst Commentary</h5>
        <div [innerHtml]="esgOverallAssessment?.analystCommentary || 'N/A'"></div>
    </div>


    <h3 class="mt-5">Materiality Matrix</h3>
    <div class="d-flex flex-row align-items-stretch shadow">
        <div class="card w-50 left-card stacked-card">
            <div class="card-body">
                <div scatterChart *ngIf="esgKeyIssueValue" [chartID]="'impactChart'" [chartData]="matrixData" [assessmentAxis]=true [bulletLabel]=true
                    [verticalAxisMax]="10" [verticalAxisName]="'Sustainability Impact'" [horizontalAxisName]="'Business Impact'"
                    [horizontalAxisMax]="10" [currentColor]="'#999999'" [currentSize]="20" [otherColor]="'#00A19B'" [otherSize]="20" [otherAlpha]="0.3" [revertVertical]=false>
                    <div id="impactChart" style="height:350px; width:100%"></div>
                </div>

                <div *ngIf="researchType === 'comprehensive'">
                    <div class="d-flex align-items-center mt-4">
                        <span class="circle-icon key-issue mr-1"></span> <span class="small">= Key ESG Issues (with Analyst Commentary)</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card w-50 right-card stacked-card">
            <ul class="list-group list-group-flush pt-4">
                <li *ngFor="let item of esgKeyIssueValue; let i = index" class="list-group-item px-3 issue-item">
                    <div class="d-flex align-items-center px-3 py-2 secondary-text" [ngClass]="{'item-link': commentaryForIssue[item.keyEsgIssue.name] && commentaryForIssue[item.keyEsgIssue.name].length > 0}"
                        (click)="showItemDetails(item)">
                        <span class="mr-3">{{ companyLetters[i] }}</span> {{ item.keyEsgIssue.name }}
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="card-group shadow">
        <div class="card card-body bottom-card">
            <p *ngIf="esgKeyIssueValue && esgKeyIssueValue.length > 0" class="small">
                The Materiality Matrix presents, from the perspective of the industry, the most material ESG issues from a business impact
                and/or environmental/social impact perspective. ESG issues can be interpreted as the most important management
                areas, i.e. the issues that could cause the most significant business and/or environmental/social impacts
                if not managed well. The location on the matrix indicates the relative importance of the ESG issue, with
                those located in the top right corners being the most material for the industry as a whole. The graph
                also highlights the 2-3 ESG issues that, for the company under consideration, our analysts have identified
                as the most relevant to comment on in more detail. This selection takes into account company specific
                factors such as business model, geographic presence, product offering, as well as important recent developments
                and trends (e.g. incidents, announcements of new initiatives, management changes). Analyst commentary
                on the latter ESG issues is provided in relevant sections further below.
            </p>
        </div>
    </div>

    <div *ngIf="esgGroupedIndicators" class="stacked-cards">
        <h3 class="mt-5">Key ESG Issues</h3>
        <div *ngFor="let group of esgGroupedIndicators; let i = index" class="card shadow card-body stacked-card">
            <div *ngIf="i === 0" class="small bold">
                <div class="row mb-3">
                    <div class="col-5">
                        Indicator Name
                    </div>
                    <div class="col-7">
                        <div class="row">
                            <div class="col-3 text-center">Company Score (out of 100)</div>
                            <div class="col-3 text-center">Peer Group Average</div>
                            <div class="col-3 text-center">Leading Practice Average</div>
                            <div class="col-3 text-center">Leading Practice Gap</div>
                        </div>
                    </div>
                </div>
            </div>

            <h5>{{ group.groupName }}</h5>
            <div *ngFor="let indicator of group.items" class="row d-flex align-items-center p-2 mt-2 bg-light-grey" 
            (click)="showIssueDetails(indicator)" style="cursor: pointer;">
                <div class="col-5 align-items-center" [ngClass]="{'text-link': !indicator.isEventIndicator}">
                    {{ indicator.name }}
                </div>
                <div class="col-7 align-items-center">
                    <div class="row d-flex align-items-center">
                        <div class="col-3 text-center">{{ indicator.isEventIndicator ? indicator.eventIndicatorScore.answerCategory : indicator.rpIndicatorScore.companyScore
                            }}
                        </div>
                        <div class="col-3 text-center">{{ indicator.isEventIndicator ? indicator.eventIndicatorScore.peerGroupAverage : indicator.rpIndicatorScore.peerGroupAverage
                            }}
                        </div>
                        <div class="col-3 text-center">{{ indicator.isEventIndicator ? indicator.eventIndicatorScore.bestPractice : indicator.rpIndicatorScore.bestPractice
                            }}
                        </div>
                        <div class="col-3 text-center">
                            <div class="gap-legend gap{{ getGap(indicator) }}"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex align-items-center mt-4 small">
            <div class="gap-legend gap1 mr-2 ml-auto"></div> <span class="mr-4">A negative to +25 point gap or Event Category 0-2</span>
            <div class="gap-legend gap2 mr-2"></div> <span class="mr-4">A 26-74 point gap or Event Category 3</span>
            <div class="gap-legend gap3 mr-2"></div> <span class="mr-2">A 75+ point gap or Event Category 4-5</span>
        </div>

    </div>
</div>

<app-modal #itemDetails [id]="'itemDetails'" [size]="'modal-lg'">
    <div class="app-modal-header">
        {{ selectedItem?.keyEsgIssue.name }}
    </div>
    <div class="app-modal-body">
        <p [innerHtml]="commentaryForIssue[selectedItem?.keyEsgIssue.name]"></p>
    </div>
</app-modal>

<app-modal #issueDetails [size]="'modal-lg'">
    <div class="app-modal-header">
        ESG Indicator
    </div>
    <div class="app-modal-body">
        <div class="d-flex">
            <div class="mr-auto">
                <h4>{{ selectedIndicator?.name }}</h4>
            </div>
            <div class="ml-auto">
                <h4 class="mb-0">{{ selectedIndicator?.score.rawScore }}</h4>
                Score
            </div>
        </div>

        <div *ngIf="selectedIndicator?.answerCategoryDescription" class="text-center pt-3 indicator-name">
            <hr />
            <div class="pl-5 pr-5 pt-2">{{ selectedIndicator.answerCategoryDescription }}</div>
        </div>
      
        <div *ngIf="selectedIndicator?.ticboxes.length > 0" class="pt-2">
            <hr />
            <div class="row pt-2">
                <div *ngFor="let group of tickboxGroups" class="col-6">
                    <div *ngFor="let checkbox of group" class="d-flex">
                        <input type="checkbox" disabled="disabled" [checked]="checkbox.checked" class="float-left mt-1 mr-3" />
                        <label>{{ checkbox.description }}</label>
                    </div>
                </div>
            </div>
        </div>

    </div>
</app-modal>
